jFancyTile slideshow efecto mosaico

En marcofolio.net he visto un efecto que me ha gustado, se trata de un slideshow con efecto tipo mosaico. Requiere el uso de la librería jQuery y un plugin llamado jFancyTile que permite transformar cualquier lista de imágenes en un bello efecto. Es recomendable que las imágenes tengan el mismo tamaño y no hay límite para añadir imágenes. El inconveniente es que con Firefox se ve perfecto pero no así con otros navegadores como por ejemplo Explorer. Si aún así deseas añadirlo al blog buscamos </head> y justo antes añadimos los estilos y los scripts.

<style type='text/css'>
#demo {margin:25px;}
#demo div.jfancytileContainer {
-moz-box-shadow:0 0 10px #222222;
border:5px solid #222222;}
#demo h3.jfancytileTitle {
color:#000000;
font:italic 18px Georgia,Times,Serif;
margin:10px 20px;
position:absolute;
text-shadow:0 2px 4px #222222;
z-index:999;}
#demo div.jfancytilenav {background-position:center center;
background-repeat:no-repeat;
cursor:pointer;position:absolute;
width:50px;z-index:99;}
#demo div.jfancytileForward {background-image:url(&quot;url-flecha-derecha&quot;);}
#demo div.jfancytileBack {background-image:url(&quot;url-flecha-izquierda&quot;);}
</style>

Las siguientes imágenes las descargamos a nuestro PC para posteriormente subirlas a nuestro álbum Picasa y añadirlas a los estilos donde dice url-flecha-izquierda y url-flecha-derecha

Si estamos utilizando jQuery probablemente tengamos añadida la librería de googleapis sería la siguiente y en ese caso no tendríamos que volver a añadirla.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

A continuación descargamos el zip que el autor proporciona, subimos los archivos del zip al sitio donde solemos alojar archivos y añadimos la url de de la siguiente forma:

<script src='url-archivo-jquery.jfancytile.js' type='text/javascript'/>
<script src='url-archivo-jquery.easing.1.3.js' type='text/javascript'/>
<script src='url-archivo-script.js'type='text/javascript'/>

Una vez guardados los cambios ya podemos añadir las imágenes en una entrada o gadget de HTML

<div id="demo"><ul><li><img alt="" src="url-imagen1" /></li><li><img alt="" src="url-imagen2" /></li><li><img alt="" src="url-imagen3" /></li></ul></div>